<template>
	<!-- 回复 -->
		<view :class="is_show?'box-style' : ''">
			<view class="title" v-show="is_show">{{$t('blurb.comment.reply')}}</view>
			<textarea :value="replyInput" :placeholder="t('blurb.comment.textarea')" :auto-focus="true" :maxlength="-1"
				:show-confirm-bar="false" :confirm-type="return" :adjust-position="true" :cursor-spacing="cursorSpacing"
				adjust-keyboard-to="bottom"
				:class="is_show?'input-box-style' : 'input-comment'" @blur="closeCommentBox" @focus="handleFocus"></textarea>
		</view>
</template>

<script setup lang="ts">
	import { ref, defineEmits, defineProps } from 'vue'
	import { useI18n } from 'vue-i18n'
	const { t } = useI18n()
	const props = defineProps<{
		is_reply : boolean
	}>()
	const emits = defineEmits()
	const is_show = ref(props.is_reply)
	const replyInput = ref<string>(null)
	const cursorSpacing = ref(90); // 设置光标与键盘的间距
	const originalScrollTop = ref<number>(0)
	
	const closeCommentBox =()=>{
		emits('closeCommentBox')
	}
	const handleFocus = () => {
			cursorSpacing.value = 90
		}
</script>

<style scoped lang="scss">
	.box-style {
		width: 100%;
		padding: 0.3rem;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}

	.title {
		width: 3rem;
		height: 1.06rem;
		color: rgba(16, 16, 16, 0.8);
		font-size: 0.75rem;
		text-align: left;
	}

	.input-box-style {
		width: 100%;
		height: 6.25rem;
		padding: 0.5rem 0.5rem 2rem;
		box-sizing: border-box;
		border-radius: 0.63rem;
		background-color: rgba(194, 194, 194, 1);
		font-size: 0.88rem;
		text-align: left;
	}

	.input-comment {
		width: 95%;
		height: 1.94rem;
		border-radius: 0.94rem;
		background-color: rgba(225, 225, 225, 1);
		color: rgba(136, 136, 136, 1);
		font-size: 0.88rem;
		padding: 0.5rem 1rem;
		box-sizing: border-box;
		margin: 0 auto;
	}
</style>